<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="queryParams" label-width="80px">
      <el-form-item label="订单号">
        <el-input
          v-model="queryParams.orderNo"
          clearable
          placeholder="请输入订单号"
        />
      </el-form-item>
      <el-form-item label="用户">
        <el-input
          v-model="queryParams.userName"
          clearable
          placeholder="请输入用户"
        />
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select
          v-model="queryParams.orderStatus"
          clearable
          placeholder="请选择状态"
          style="width: 200px"
        >
          <el-option label="全部" value="" />
          <el-option label="待付款" value="0" />
          <el-option label="已付款" value="1" />
          <el-option label="已发货" value="2" />
          <el-option label="已完成" value="3" />
          <el-option label="已取消" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="queryParams.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">
          搜索
        </el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格：铺满剩余高度 + 冻结列 -->
    <div class="table-wrapper">
      <el-table :data="tableData" v-loading="loading" height="100%">
        <el-table-column type="index" width="60" label="序号" fixed="left" />
        <el-table-column prop="orderNo" label="订单号" min-width="180" />
        <el-table-column prop="userName" label="用户" min-width="120" />
        <el-table-column prop="totalAmount" label="价格(元)" width="100" />
        <el-table-column label="订单状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="statusMap[row.orderStatus].type">
              {{ statusMap[row.orderStatus].label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" />
        <!-- 冻结操作列 -->
        <el-table-column label="操作" width="220" fixed="right" align="center">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="handleDetail(row)">
              详情
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="handleQuery"
    />
  </div>

  <!-- 右侧抽屉：详情 -->
  <el-drawer
    v-model="drawer"
    title="订单详情"
    direction="rtl"
    size="420"
    :close-on-click-modal="false"
    @closed="resetDetail"
  >
    <!-- 关闭时清空 -->

    <el-skeleton ons="2" :loading="detailLoading" animated>
      <template #default>
        <el-form :model="detailForm" label-width="90px" class="detail-form">
          <el-form-item label="订单号：">
            <span>{{ detailForm.orderNo }}</span>
          </el-form-item>
          <el-form-item label="用户：">
            <span>{{ detailForm.userName }}</span>
          </el-form-item>
          <el-form-item label="订单状态：">
            <el-tag :type="statusMap[detailForm.orderStatus].type">
              {{ statusMap[detailForm.orderStatus].label }}
            </el-tag>
          </el-form-item>
          <el-form-item label="金额：">
            <span>¥{{ detailForm.totalAmount }}</span>
          </el-form-item>
          <el-form-item label="创建时间：">
            <span>{{ detailForm.createTime }}</span>
          </el-form-item>
          <!-- 更多字段按需继续加 -->
        </el-form>
      </template>
    </el-skeleton>

    <template #footer>
      <el-button @click="drawer = false">关 闭</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Order, OrderResponse } from '@/api/orders/type'
import {
  R,
  page,
  PageQuery,
  emptyPageInfo,
  ResponseData,
  PageInfo,
} from '@/api/common/type'
import { reqOrdersPage, reqOrderOne, reqOrderDel } from '@/api/orders/index'
// 订单状态（0待付款 1已付款 2已取消 3已发货 4已完成）

const statusMap: Record<string, { label: string; type: string }> = {
  0: { label: '待付款', type: 'warning' },
  1: { label: '已付款', type: '' },
  2: { label: '已发货', type: 'primary' },
  3: { label: '已完成', type: 'success' },
  4: { label: '已取消', type: 'info' },
}
/* ========== 搜索 ========== */
const queryParams = reactive({
  orderNo: '',
  userName: '',
  orderStatus: '',
  dateRange: [],
  pageNum: 1,
  pageSize: 10,
})
const loading = ref(false)
const total = ref(0)
const tableData = ref<Order[]>([])

/* 抽屉开关 + 详情数据 */
const drawer = ref(false)
const detailForm = ref<Order>({} as Order) // 与列表项同类型即可
const detailLoading = ref(false)

/* ========== 列表 + 分页 ========== */
const handleQuery = async () => {
  loading.value = true

  const pageInfo: PageInfo = {
    pageSize: queryParams.pageSize,
    pageIndex: queryParams.pageNum,
  }

  const order: Order = { ...queryParams }

  if (queryParams.dateRange.length > 1) {
    order.beginTime = queryParams.dateRange[0] + 'T00:00:00'
    order.endTime = queryParams.dateRange[1] + 'T23:59:59'
  }

  const query: PageQuery<Order> = {
    filterData: order,
    pageInfo: pageInfo,
  }

  const result: OrderResponse = await reqOrdersPage(query)

  if (result && result.code === 200) {
    tableData.value = result.data.records
    total.value = result.data.total
  } else {
    return Promise.reject(new Error(result.message))
  }
  loading.value = false
}
function resetQuery() {
  Object.assign(queryParams, {
    orderNo: '',
    userName: '',
    status: '',
    dateRange: [],
    pageNum: 1,
  })
  handleQuery()
}

/* ========== 按钮操作 ========== */
const handleDelete = async (row: Order) => {
  await ElMessageBox.confirm('确定要删除该订单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })

  const result: R<boolean> = await reqOrderDel(row.orderId)

  if (result && result.success) {
    handleQuery()
    ElMessage.success('删除成功')
  } else {
    ElMessage.success('删除失败')
  }
}

const handleDetail = async (row: Order) => {
  drawer.value = true
  detailLoading.value = true
  try {
    const res = await reqOrderOne(row.orderId) // 你的封装接口
    if (res?.code === 200) {
      detailForm.value = res.data // 后端返回的 Order 实体
    } else {
      ElMessage.error(res?.message ?? '查询详情失败')
    }
  } finally {
    detailLoading.value = false
  }
}

/* 清空详情 */
function resetDetail() {
  Object.assign(detailForm.value, {
    orderNo: '',
    userName: '',
    orderStatus: '',
    totalAmount: '',
    createTime: '',
  })
}

onMounted(handleQuery)
</script>

<style scoped>
/* 占满屏幕高度 */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
}
.table-wrapper {
  flex: 1;
  overflow: hidden;
}
</style>
```
